<template>
  <div class="bg">
    <nav-com
      :title="$t('personalInfo')"
      :showView='showView'
      @back="backHandler()"
      style="font-family: PingFang_teshu!important;"
    ></nav-com>
    <div class="top-view1">
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('avtcr')" @click="tochangetu()"  style="font-family: PingFang_teshu!important;">
          <template #right-icon>
            <div style="display: flex;align-items: center">
              <img class="avatar" :src='shareUser.fullavatar'>
              <van-icon name="arrow"  color="#969799" size="0.467rem"/>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group inset class="m-b-10">
        <van-field inset is-link
                   readonly
                   :label="$t('nickname')"
                   :placeholder="$t('writenickname')"
                   input-align="right"
                   v-model="shareUser.name"
                   @click="jumpTo('/nickName',shareUser.name)"/>
      </van-cell-group>
      <van-cell-group inset class="m-b-10">
        <van-field
          v-model="shareUser.genders"
          is-link
          readonly
          :label="$t('sex')"
          :placeholder="$t('choosesex')"
          input-align="right"
          @click="showsexPicker= true"
        />
        <van-popup v-model="showsexPicker" round position="bottom"  get-container="body" :safe-area-inset-bottom="true">
          <van-picker
            class="jiabold"
            :item-height="44"
            :title="$t('choosesex')"
            show-toolbar
            :confirm-button-text="$t('sure')"
            :cancel-button-text="$t('close')"
            v-model="shareUser.genders"
            :columns="$t('sexColumns')"
            @cancel="showsexPicker = false"
            @confirm="onConfirmSex"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group inset class="m-b-10">
        <van-field
          v-model="shareUser.region"
          is-link
          readonly
          :label="$t('region')"
          :placeholder="$t('chooseregion')"
          input-align="right"
          @click="show= true"
        />
        <van-popup v-model="show" position="bottom" round get-container="body" :safe-area-inset-bottom="true">
          <van-picker  :title="$t('region')" :item-height="44" class="regions" show-toolbar :columns="regioncolumns" @confirm="onConfirm1" @cancel="show = false" :confirm-button-text="$t('sure')"
                      :cancel-button-text="$t('close')"/>
        </van-popup>
      </van-cell-group>
      <van-cell-group inset class="m-b-10">
        <van-field
          v-model="shareUser.age"
          is-link
          readonly
          :label="$t('age')"
          :placeholder="$t('chooseage')"
          input-align="right"
          @click="showOldPicker= true"
        />
        <van-popup v-model="showOldPicker" round position="bottom" get-container="body" :safe-area-inset-bottom="true">
          <van-picker
            class="jiabold"
            :item-height="44"
            :title="$t('chooseage')"
            :confirm-button-text="$t('sure')"
            :cancel-button-text="$t('close')"
            show-toolbar
            v-model="shareUser.age"
            :columns="$t('oldColumns')"
            @cancel="showOldPicker = false"
            @confirm="onConfirmOld"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group inset class="m-b-10">
        <van-field
          v-model="shareUser.weight+' lbs'"
          is-link
          readonly
          :label="$t('weight')"
          :placeholder="$t('writeweight')"
          input-align="right"
          @click="jumpTo('/fatYourself',shareUser.weight)"
        />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import { locationinfo, profile, userInfo } from '../../api/user'
import { formatCatalogTreeDis } from '@/utils'
export default {
  name: 'bonusList',
  components: {
    navCom
  },
  data () {
    return {
      showPage: true,
      show: false,
      fieldValue: '',
      showPicker: false,

      sexValue: '',
      showsexPicker: false,
      pageList: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }],
      showOldPicker: false,
      actions: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }
      ],
      showView: true,
      title: '个人信息',
      listEmpty: '',
      list: [],
      isLoading: false,
      loading: true,
      finished: false,
      total: 0,
      pageNo: 1,
      Dataflag: '',
      shareUser: {},
      regioncolumns: [
        {
          text: '浙江',
          children: [
            {
              text: '杭州'
            },
            {
              text: '温州'
            }
          ]
        },
        {
          text: '福建',
          children: [
            {
              text: '福州'
            },
            {
              text: '厦门'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.init()
    let _this = this
    // 根据自己需要来监听对应的key
    window.addEventListener('setItemEvent', function (e) {
      // e.key : 是值发生变化的key
      // e.newValue : 是可以对应的新值
      if (e.key === 'goChangeimage') {
        console.log(e.newValue)
        if (e.newValue) {
          _this.getUserDataphoto()
          localStorage.removeItem('goChangeimage')
        }
      }
    })
  },
  onShow () {
  },
  destroyed () {
    console.log('===页面销毁')
  },
  onHide () {
  },
  methods: {
    getloaction () {
      locationinfo().then((res) => {
        if (res.code == 1) {
          this.regioncolumns = res.data.Location.regioncolumns[0]
        }
      })
    },
    onCancel () {
      this.showacvtar = false
    },
    onConfirm1 (value, index) {
      console.log('====CountryRegion', value)
      this.shareUser.region = this.$i18n.locale == 'zh' ? (value[1] ? value[1] + ',' : '') + value[0] + ',' + '美国' : (value[1] ? value[1] + ',' : '') + value[0] + ',' + 'America'
      this.show = false
      this.saveinfo('region')
    },
    jumpTo (url, canshu) {
      this.$router.push({ path: url,
        query: { canshu: canshu }
      })
    },
    onPageConfirm () {

    },
    onConfirmSex (e) {
      console.log('====sexColumns', e)
      this.showsexPicker = false
      this.shareUser.gender = e.value
      this.zhuanhuansex()
      this.saveinfo('gender')
    },
    saveinfo (type) {
      let params = {}
      switch (type) {
        case 'region':
          params = { region: this.shareUser.region }
          break
        case 'gender':
          params = { gender: this.shareUser.gender }
          break
        case 'age':
          params = { age: this.shareUser.age }
          break
      }
      profile(params).then((res) => {
        if (res.code == 1) {
          const nav = navigator.userAgent
          if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
            phone.userInfoEdit()
          } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
            setTimeout(() => {
              this.$bridge.callhandler('userInfoEdit', {}, res => {})
            })
          }
          if (this.$i18n.locale == 'zh') {
            this.$toast('修改成功')
          } else {
            this.$toast('Changed')
          }
        }
      })
    },
    zhuanhuansex () {
      switch (this.shareUser.gender) {
        case 1:
          console.log('=== this.shareUser.genders', this.shareUser.genders)
          if (this.$i18n.locale == 'zh') {
            this.shareUser.genders = '男'
          } else if (this.$i18n.locale == 'es') {
            this.shareUser.genders = 'Hombre'
          } else {
            this.shareUser.genders = 'Male'
          }
          break
        case 0:
          if (this.$i18n.locale == 'zh') {
            this.shareUser.genders = '女'
          } else if (this.$i18n.locale == 'es') {
            this.shareUser.genders = 'Mujer'
          } else {
            this.shareUser.genders = 'Female'
          }
          break
        case 2 :
          if (this.$i18n.locale == 'zh') {
            this.shareUser.genders = '其他'
          } else if (this.$i18n.locale == 'es') {
            this.shareUser.genders = 'Otro'
          } else {
            this.shareUser.genders = 'Orther'
          }
          break
      }
    },
    onConfirmOld (e) {
      this.showOldPicker = false
      this.shareUser.age = e.value
      this.saveinfo('age')
    },
    // 用户信息
    getUserData () {
      userInfo().then((res) => {
        if (res.code == 1) {
          if (!res.data.userinfo.weight) {
            res.data.userinfo.weight = ''
          }
          this.shareUser = res.data.userinfo
          this.shareUser.weight = res.data.userinfo.weight != 'undefined' ? res.data.userinfo.weight : ''
          console.log('== this.shareUser', this.shareUser)
          this.zhuanhuansex()
        }
      })
    },
    getUserDataphoto () {
      userInfo().then((res) => {
        if (res.code == 1) {
          this.shareUser.fullavatar = res.data.userinfo.fullavatar
        }
      })
    },
    // 返回
    backHandler () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {})
      } else {
        this.$router.go(-1)
      }
    },
    tochangetu () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.startEditHead()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('startEditHead', {}, res => {})
      }
    },
    // 初始化
    init () {
      this.getloaction()
      this.getUserData()
    }
  }
}
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
}
  .m-b-10{
    margin-bottom: 10px;
  }
  .m-t-10{
    margin-top: 10px;
  }
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
::v-deep .van-picker__cancel,::v-deep  .van-picker__confirm{
  font-size: 20px!important;
}
::v-deep .regions .van-picker-column{
  font-size: 20px!important;
}
::v-deep .jiabold .van-picker-column,::v-deep .jiabold .van-picker__title, ::v-deep .jiabold .van-picker__confirm, ::v-deep .jiabold .van-picker__cancel{
  font-size: 20px!important;
}

::v-deep .regions .van-picker-column:nth-child(4){
display: none;
}
::v-deep .van-cell{
  font-size: 20px!important;
}
::v-deep .van-cell__title>span,::v-deep .van-button__text{
  font-family: PingFang_teshu!important;
  font-weight: bold;
}
::v-deep .back_text>div{
  font-family: PingFang_teshu!important;
  font-weight: bold;
}
</style>
